<template>
  <div class="profile">
    <div class="user-message" @click="toLogin">
      <div class="img">
        <i class="fa fa-user-circle-o" :class="{active: isLogin}"></i>
      </div>
      <div class="text">
        <span v-if="!isLogin"><b>登录/注册</b></span>
        <span v-else><b>欢迎您:{{ username }}</b></span>
      </div>
      <div class="ico">
        <i class="fa fa-angle-right"></i>
      </div>
    </div>
    <div class="profile-item">
      <ProfileItem>
        <i class="fa fa-commenting" slot="img"></i>
        <span slot="text">消息中心</span>
        <i class="fa fa-angle-right" slot="ico"></i>
      </ProfileItem>
      <ProfileItem>
        <i class="fa fa-pencil-square" slot="img"></i>
        <span slot="text">创作者中心</span>
        <i class="fa fa-angle-right" slot="ico"></i>
      </ProfileItem>
      <ProfileItem>
        <i class="fa fa-archive" slot="img"></i>
        <span slot="text">签到赢好礼</span>
        <i class="fa fa-angle-right" slot="ico"></i>
      </ProfileItem>
      <ProfileItem>
        <i class="fa fa-thumbs-up" slot="img"></i>
        <span slot="text">我赞过的</span>
        <i class="fa fa-angle-right" slot="ico"></i>
      </ProfileItem>
      <ProfileItem>
        <i class="fa fa-eye" slot="img"></i>
        <span slot="text">阅读过的文章</span>
        <i class="fa fa-angle-right" slot="ico"></i>
      </ProfileItem>
      <ProfileItem>
        <i class="fa fa-envelope-square" slot="img"></i>
        <span slot="text">意见反馈</span>
        <i class="fa fa-angle-right" slot="ico"></i>
      </ProfileItem>
      <ProfileItem>
        <i class="fa fa-cog" slot="img"></i>
        <span slot="text">设置</span>
        <i class="fa fa-angle-right" slot="ico"></i>
      </ProfileItem>
      <ProfileItem>
        <i class="fa fa-wrench" slot="img"></i>
        <span slot="text">系统更新</span>
        <i class="fa fa-angle-right" slot="ico"></i>
      </ProfileItem>

    </div>
  </div>
</template>

<script>
import ProfileItem from "./ProfileItem";
export default {
  name: "Profile",
  components: {
    ProfileItem
  },
  data() {
    return{
      isLogin: false
    }
  },
  methods: {
    //登录页面
    toLogin(){
      if (this.isLogin){
        //alert('你已登录');
        this.$router.push('/personal');
      }else {
        this.$router.replace('/login');
      }
    },
    //退出登录
    logout(){
      let flag = confirm('你确定要退出登录吗？');
      if (flag){
        sessionStorage.removeItem('username');
        this.$router.go(0);
      }
    }
  },
  created() {
    if (sessionStorage.getItem('username')){
      this.isLogin = true;
    }
  },
  computed: {
    username(){
      return sessionStorage.getItem('username');
    }
  }
}
</script>

<style scoped>
  .active{
    color: red;
  }
  .user-message{
    width: 100%;
    height: 3rem;
    margin-top: 6px;
    background-color: white;
  }
  .user-message div{
    text-align: center;
    height: 3rem;
    display: inline-block;
    float: left;
  }
  .user-message .img{
    width: 30%;
    height: 3rem;
    line-height: 3rem;
    font-size: 2rem;
  }
  .user-message .text{
    width: 50%;
    line-height: 3rem;
    font-size: 0.7rem;
  }
  .user-message .text span{
    float: left;
  }
  .user-message .ico{
    width: 20%;
    line-height: 3rem;
    font-size: 0.7rem;
  }
  .profile-item{
    width: 100%;
    background-color: white;
    margin-top: 6px;
  }
</style>